<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    :close-on-click-modal="false"
    width="70%"
    @close="close"
  >
    <div>
      <div style="margin-bottom: 20px">
        <span>选择新增设备：</span>
        <el-select v-model="device" filterable placeholder="可添加设备列表">
          <el-option
            v-for="item in noRoomList"
            :key="item.id"
            :label="item.name + ' - ' + item.sn"
            :value="item.id"
          />
        </el-select>
        <el-button
          type="primary"
          style="margin-left: 20px"
          :loading="saveLoading"
          @click="handleAdd"
          >新增</el-button
        >
      </div>
      <div class="table-inner">
        <el-table class="table" v-loading="loading" :data="persList" border>
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column prop="name" label="设备名称" align="center">
            <template #default="scope">{{ scope.row.equipment.name }}</template>
          </el-table-column>
          <el-table-column prop="sn" label="设备编号" align="center">
            <template #default="scope">{{ scope.row.equipment.sn }}</template>
          </el-table-column>
          <el-table-column prop="status" label="设备状态" align="center">
            <template #default="scope">
              <el-tag type="success" v-if="scope.row.equipment.status == 1">可用</el-tag>
              <el-tag type="info" v-else>不可用</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="180">
            <template #default="scope">
              <el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
                编辑
              </el-button>
              <el-button type="danger" size="small" icon="Edit" @click="del(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">关闭</el-button>
      </span>
    </template>
  </el-dialog>
  <TimeDialog ref="timeDialog" @refresh="getPersList()" />
</template>
<script lang="ts" setup>
import { ElMessageBox, ElMessage, FormInstance, ElNotification } from 'element-plus'
import { reactive, ref } from 'vue'
import {
  personnelList,
  departmentList,
  addRoomPerso,
  editRoomPerso,
  roomPerso,
  equipInfo,
  quipmentList,
  delQuipment,
  addQuipment,
  noIndexRoom
} from '@/api/admin'
import { useRoute } from 'vue-router'
import TimeDialog from './TimeDialog.vue'
const route = useRoute()
const loading = ref()
const saveLoading = ref(false)
const persList = ref()
const filter = reactive({
  room_id: '', //房间id,
  personnel_id: '', //人员id
})
const noRoomList = ref()
const device = ref() //要新增的设备
const dialogVisible = ref<boolean>(false)
const title = ref('可操作设备列表')
const timeDialog = ref()

function close() {
  device.value = ''
  noRoomList.value = []
  dialogVisible.value = false
}

const show = (item = {}) => {
  filter.room_id = item.room_id
  filter.personnel_id = item.personnel_id
  dialogVisible.value = true
  getPersList()
}

const getPersList = () => {
  let fil = JSON.stringify(filter)
  let op = { room_id: '=', personnel_id: '=' }
  loading.value = true
  quipmentList({ filter: fil, op: op }).then((res) => {
    if (res.code == 200) {
      persList.value = res.data.data
      getNoIndexRoom()
    } else {
      dialogVisible.value = false
    }
    loading.value = false
  })
}
const getNoIndexRoom = () => {
  noIndexRoom({
    room_id: filter.room_id,
    personnel_id: filter.personnel_id,
  }).then((res) => {
    if (res.code == 200) {
      noRoomList.value = res.data.data
    } else {
      dialogVisible.value = false
    }
  })
}

const handleAdd = () => {
  if (!device.value) {
    ElMessage.warning('请选择要新增的设备！')
    return
  }
  let obj = noRoomList.value.find((item) => {
    return item.id == device.value
  })
  if (!obj) return
  saveLoading.value = true
  addQuipment({
    platform_id: obj.platform_id,
    room_id: obj.room_id,
    personnel_id: filter.personnel_id,
    status: 1,
    equipment_id: obj.id,
  }).then((res) => {
    if (res.code == 200) {
      ElNotification({
        title: '新增成功',
        message: res.msg,
        type: 'success',
      })
      device.value = ''
      getPersList()
    }
    saveLoading.value = false
  })
}

const edit = (row) => {
  timeDialog.value.show(row)
}
const del = (row) => {
  ElMessageBox.confirm(`你确定要删除设备 “${row.equipment.name}” 吗?`, '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true,
  }).then(() => {
    delQuipment({
      id: row.id,
    }).then((res) => {
      if (res.code == 200) {
        ElNotification({
          title: res.data,
          message: res.msg,
          type: 'success',
        })
        getPersList()
      }
    })
  })
}

defineExpose({
  show,
})
</script>
<style lang="scss" scoped>
</style>

